<main class="container-xl">
    <div id="diagnostics-block" class="my-3 p-3 bg-white rounded shadow">
        <h6 class="border-bottom pb-2 mb-2">Diagnostics</h6>

        <h3>Versions</h3>
        <div class="row">
            <div class="col-md">
                <dl class="row">
                    <dt class="col-sm-5">Server Installed
                        <span class="badge bg-success d-none" id="server-success" title="Latest version is installed.">Ok</span>
                        <span class="badge bg-warning d-none" id="server-warning" title="There seems to be an update available.">Update</span>
                        <span class="badge bg-info d-none" id="server-branch" title="This is a branched version.">Branched</span>
                    </dt>
                    <dd class="col-sm-7">
                        <span id="server-installed">{{version}}</span>
                    </dd>
                    <dt class="col-sm-5">Server Latest
                        <span class="badge bg-secondary d-none" id="server-failed" title="Unable to determine latest version.">Unknown</span>
                    </dt>
                    <dd class="col-sm-7">
                        <span id="server-latest">{{page_data.latest_release}}<span id="server-latest-commit" class="d-none">-{{page_data.latest_commit}}</span></span>
                    </dd>
                    {{#if page_data.web_vault_enabled}}
                    <dt class="col-sm-5">Web Installed
                        <span class="badge bg-success d-none" id="web-success" title="Latest version is installed.">Ok</span>
                        <span class="badge bg-warning d-none" id="web-warning" title="There seems to be an update available.">Update</span>
                    </dt>
                    <dd class="col-sm-7">
                        <span id="web-installed">{{page_data.web_vault_version}}</span>
                    </dd>
                    {{#unless page_data.running_within_docker}}
                    <dt class="col-sm-5">Web Latest
                        <span class="badge bg-secondary d-none" id="web-failed" title="Unable to determine latest version.">Unknown</span>
                    </dt>
                    <dd class="col-sm-7">
                        <span id="web-latest">{{page_data.latest_web_build}}</span>
                    </dd>
                    {{/unless}}
                    {{/if}}
                    {{#unless page_data.web_vault_enabled}}
                    <dt class="col-sm-5">Web Installed</dt>
                    <dd class="col-sm-7">
                        <span id="web-installed">Web Vault is disabled</span>
                    </dd>
                    {{/unless}}
                    <dt class="col-sm-5">Database</dt>
                    <dd class="col-sm-7">
                        <span><b>{{page_data.db_type}}:</b> {{page_data.db_version}}</span>
                    </dd>
                </dl>
            </div>
        </div>

        <h3>Checks</h3>
        <div class="row">
            <div class="col-md">
                <dl class="row">
                    <dt class="col-sm-5">Running within Docker</dt>
                    <dd class="col-sm-7">
                    {{#if page_data.running_within_docker}}
                        <span class="d-block"><b>Yes</b></span>
                    {{/if}}
                    {{#unless page_data.running_within_docker}}
                        <span class="d-block"><b>No</b></span>
                    {{/unless}}
                    </dd>
                    <dt class="col-sm-5">Environment settings overridden</dt>
                    <dd class="col-sm-7">
                    {{#if page_data.overrides}}
                        <span class="d-block" title="The following settings are overridden: {{page_data.overrides}}"><b>Yes</b></span>
                    {{/if}}
                    {{#unless page_data.overrides}}
                        <span class="d-block"><b>No</b></span>
                    {{/unless}}
                    </dd>
                    <dt class="col-sm-5">Uses a reverse proxy</dt>
                    <dd class="col-sm-7">
                    {{#if page_data.ip_header_exists}}
                        <span class="d-block" title="IP Header found."><b>Yes</b></span>
                    {{/if}}
                    {{#unless page_data.ip_header_exists}}
                        <span class="d-block" title="No IP Header found."><b>No</b></span>
                    {{/unless}}
                    </dd>
                    {{!-- Only show this if the IP Header Exists --}}
                    {{#if page_data.ip_header_exists}}
                    <dt class="col-sm-5">IP header
                    {{#if page_data.ip_header_match}}
                        <span class="badge bg-success" title="IP_HEADER config seems to be valid.">Match</span>
                    {{/if}}
                    {{#unless page_data.ip_header_match}}
                        <span class="badge bg-danger" title="IP_HEADER config seems to be invalid. IP's in the log could be invalid. Please fix.">No Match</span>
                    {{/unless}}
                    </dt>
                    <dd class="col-sm-7">
                    {{#if page_data.ip_header_match}}
                        <span class="d-block"><b>Config/Server:</b> {{ page_data.ip_header_name }}</span>
                    {{/if}}
                    {{#unless page_data.ip_header_match}}
                        <span class="d-block"><b>Config:</b> {{ page_data.ip_header_config }}</span>
                        <span class="d-block"><b>Server:</b> {{ page_data.ip_header_name }}</span>
                    {{/unless}}
                    </dd>
                    {{/if}}
                    {{!-- End if IP Header Exists --}}
                    <dt class="col-sm-5">Internet access
                    {{#if page_data.has_http_access}}
                        <span class="badge bg-success" title="We have internet access!">Ok</span>
                    {{/if}}
                    {{#unless page_data.has_http_access}}
                        <span class="badge bg-danger" title="There seems to be no internet access. Please fix.">Error</span>
                    {{/unless}}
                    </dt>
                    <dd class="col-sm-7">
                    {{#if page_data.has_http_access}}
                        <span class="d-block"><b>Yes</b></span>
                    {{/if}}
                    {{#unless page_data.has_http_access}}
                        <span class="d-block"><b>No</b></span>
                    {{/unless}}
                    </dd>
                    <dt class="col-sm-5">Internet access via a proxy</dt>
                    <dd class="col-sm-7">
                    {{#if page_data.uses_proxy}}
                        <span class="d-block" title="Internet access goes via a proxy (HTTPS_PROXY or HTTP_PROXY is configured)."><b>Yes</b></span>
                    {{/if}}
                    {{#unless page_data.uses_proxy}}
                        <span class="d-block" title="We have direct internet access, no outgoing proxy configured."><b>No</b></span>
                    {{/unless}}
                    </dd>
                    <dt class="col-sm-5">DNS (github.com)
                        <span class="badge bg-success d-none" id="dns-success" title="DNS Resolving works!">Ok</span>
                        <span class="badge bg-danger d-none" id="dns-warning" title="DNS Resolving failed. Please fix.">Error</span>
                    </dt>
                    <dd class="col-sm-7">
                        <span id="dns-resolved">{{page_data.dns_resolved}}</span>
                    </dd>
                    <dt class="col-sm-5">Date & Time (Local)</dt>
                    <dd class="col-sm-7">
                        <span><b>Server:</b> {{page_data.server_time_local}}</span>
                    </dd>
                    <dt class="col-sm-5">Date & Time (UTC)
                        <span class="badge bg-success d-none" id="time-success" title="Time offsets seem to be correct.">Ok</span>
                        <span class="badge bg-danger d-none" id="time-warning" title="Time offsets are too mouch at drift.">Error</span>
                    </dt>
                    <dd class="col-sm-7">
                        <span id="time-server" class="d-block"><b>Server:</b> <span id="time-server-string">{{page_data.server_time}}</span></span>
                        <span id="time-browser" class="d-block"><b>Browser:</b> <span id="time-browser-string"></span></span>
                    </dd>

                    <dt class="col-sm-5">Domain configuration
                        <span class="badge bg-success d-none" id="domain-success" title="The domain variable matches the browser location and seems to be configured correctly.">Match</span>
                        <span class="badge bg-danger d-none" id="domain-warning" title="The domain variable does not matches the browsers location.&#013;&#010;The domain variable does not seem to be configured correctly.&#013;&#010;Some features may not work as expected!">No Match</span>
                        <span class="badge bg-success d-none" id="https-success" title="Configurued to use HTTPS">HTTPS</span>
                        <span class="badge bg-danger d-none" id="https-warning" title="Not configured to use HTTPS.&#013;&#010;Some features may not work as expected!">No HTTPS</span>
                    </dt>
                    <dd class="col-sm-7">
                        <span id="domain-server" class="d-block"><b>Server:</b> <span id="domain-server-string">{{page_data.admin_url}}</span></span>
                        <span id="domain-browser" class="d-block"><b>Browser:</b> <span id="domain-browser-string"></span></span>
                    </dd>
                </dl>
            </div>
        </div>

        <h3>Support</h3>
        <div class="row">
            <div class="col-md">
                <dl class="row">
                    <dd class="col-sm-12">
                        If you need support please check the following links first before you create a new issue:
                         <a href="https://vaultwarden.discourse.group/" target="_blank" rel="noreferrer">Vaultwarden Forum</a>
                         | <a href="https://github.com/dani-garcia/vaultwarden/discussions" target="_blank" rel="noreferrer">Github Discussions</a>
                    </dd>
                </dl>
                <dl class="row">
                    <dd class="col-sm-12">
                        You can use the button below to pre-generate a string which you can copy/paste on either the Forum or when Creating a new issue at Github.<br>
                        We try to hide the most sensitive values from the generated support string by default, but please verify if there is nothing in there which you want to hide!<br>
                    </dd>
                </dl>
                <dl class="row">
                    <dt class="col-sm-3">
                        <button type="button" id="gen-support" class="btn btn-primary" onclick="generateSupportString(); return false;">Generate Support String</button>
                        <br><br>
                        <button type="button" id="copy-support" class="btn btn-info mb-3 d-none" onclick="copyToClipboard(); return false;">Copy To Clipboard</button>
                        <div class="toast-container position-absolute float-start" style="width: 15rem;">
                            <div id="toastClipboardCopy" class="toast fade hide" role="status" aria-live="polite" aria-atomic="true" data-bs-autohide="true" data-bs-delay="1500">
                                <div class="toast-body">
                                    Copied to clipboard!
                                </div>
                            </div>
                        </div>
                    </dt>
                    <dd class="col-sm-9">
                        <pre id="support-string" class="pre-scrollable d-none w-100 border p-2" style="height: 16rem;"></pre>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</main>

<script>
    'use strict';

    var dnsCheck = false;
    var timeCheck = false;
    var domainCheck = false;
    var httpsCheck = false;

    (() => {
        // ================================
        // Date & Time Check
        const d = new Date();
        const year = d.getUTCFullYear();
        const month = String(d.getUTCMonth()+1).padStart(2, '0');
        const day = String(d.getUTCDate()).padStart(2, '0');
        const hour = String(d.getUTCHours()).padStart(2, '0');
        const minute = String(d.getUTCMinutes()).padStart(2, '0');
        const seconds = String(d.getUTCSeconds()).padStart(2, '0');
        const browserUTC = `${year}-${month}-${day} ${hour}:${minute}:${seconds} UTC`;
        document.getElementById("time-browser-string").innerText = browserUTC;

        const serverUTC = document.getElementById("time-server-string").innerText;
        const timeDrift = (
                Date.parse(serverUTC.replace(' ', 'T').replace(' UTC', '')) -
                Date.parse(browserUTC.replace(' ', 'T').replace(' UTC', ''))
            ) / 1000;
        if (timeDrift > 30 || timeDrift < -30) {
            document.getElementById('time-warning').classList.remove('d-none');
        } else {
            document.getElementById('time-success').classList.remove('d-none');
            timeCheck = true;
        }

        // ================================
        // Check if the output is a valid IP
        const isValidIp = value => (/^(?:(?:^|\.)(?:2(?:5[0-5]|[0-4]\d)|1?\d?\d)){4}$/.test(value) ? true : false);
        if (isValidIp(document.getElementById('dns-resolved').innerText)) {
            document.getElementById('dns-success').classList.remove('d-none');
            dnsCheck = true;
        } else {
            document.getElementById('dns-warning').classList.remove('d-none');
        }

        // ================================
        // Version check for both vaultwarden and web-vault
        let serverInstalled = document.getElementById('server-installed').innerText;
        let serverLatest = document.getElementById('server-latest').innerText;
        let serverLatestCommit = document.getElementById('server-latest-commit').innerText.replace('-', '');
        if (serverInstalled.indexOf('-') !== -1 && serverLatest !== '-' && serverLatestCommit !== '-') {
            document.getElementById('server-latest-commit').classList.remove('d-none');
        }

        const webInstalled = document.getElementById('web-installed').innerText;
        checkVersions('server', serverInstalled, serverLatest, serverLatestCommit);

        {{#unless page_data.running_within_docker}}
        const webLatest = document.getElementById('web-latest').innerText;
        checkVersions('web', webInstalled, webLatest);
        {{/unless}}

        function checkVersions(platform, installed, latest, commit=null) {
            if (installed === '-' || latest === '-') {
                document.getElementById(platform + '-failed').classList.remove('d-none');
                return;
            }

            // Only check basic versions, no commit revisions
            if (commit === null || installed.indexOf('-') === -1) {
                if (installed !== latest) {
                    document.getElementById(platform + '-warning').classList.remove('d-none');
                } else {
                    document.getElementById(platform + '-success').classList.remove('d-none');
                }
            } else {
                // Check if this is a branched version.
                const branchRegex = /(?:\s)\((.*?)\)/;
                const branchMatch = installed.match(branchRegex);
                if (branchMatch !== null) {
                    document.getElementById(platform + '-branch').classList.remove('d-none');
                }

                // This will remove branch info and check if there is a commit hash
                const installedRegex = /(\d+\.\d+\.\d+)-(\w+)/;
                const instMatch = installed.match(installedRegex);

                // It could be that a new tagged version has the same commit hash.
                // In this case the version is the same but only the number is different
                if (instMatch !== null) {
                    if (instMatch[2] === commit) {
                        // The commit hashes are the same, so latest version is installed
                        document.getElementById(platform + '-success').classList.remove('d-none');
                        return;
                    }
                }

                if (installed === latest) {
                    document.getElementById(platform + '-success').classList.remove('d-none');
                } else {
                    document.getElementById(platform + '-warning').classList.remove('d-none');
                }
            }
        }

        // ================================
        // Check valid DOMAIN configuration
        document.getElementById('domain-browser-string').innerText = location.href.toLowerCase();
        if (document.getElementById('domain-server-string').innerText.toLowerCase() == location.href.toLowerCase()) {
            document.getElementById('domain-success').classList.remove('d-none');
            domainCheck = true;
        } else {
            document.getElementById('domain-warning').classList.remove('d-none');
        }

        // Check for HTTPS at domain-server-string
        if (document.getElementById('domain-server-string').innerText.toLowerCase().startsWith('https://') ) {
            document.getElementById('https-success').classList.remove('d-none');
            httpsCheck = true;
        } else {
            document.getElementById('https-warning').classList.remove('d-none');
        }
    })();

    // ================================
    // Generate support string to be pasted on github or the forum
    async function generateSupportString() {
        let supportString = "### Your environment (Generated via diagnostics page)\n";

        supportString += "* Vaultwarden version: v{{ version }}\n";
        supportString += "* Web-vault version: v{{ page_data.web_vault_version }}\n";
        supportString += "* Running within Docker: {{ page_data.running_within_docker }}\n";
        supportString += "* Environment settings overridden: ";
        {{#if page_data.overrides}}
            supportString += "true\n"
        {{else}}
            supportString += "false\n"
        {{/if}}
        supportString += "* Uses a reverse proxy: {{ page_data.ip_header_exists }}\n";
        {{#if page_data.ip_header_exists}}
        supportString += "* IP Header check: {{ page_data.ip_header_match }} ({{ page_data.ip_header_name }})\n";
        {{/if}}
        supportString += "* Internet access: {{ page_data.has_http_access }}\n";
        supportString += "* Internet access via a proxy: {{ page_data.uses_proxy }}\n";
        supportString += "* DNS Check: " + dnsCheck + "\n";
        supportString += "* Time Check: " + timeCheck + "\n";
        supportString += "* Domain Configuration Check: " + domainCheck + "\n";
        supportString += "* HTTPS Check: " + httpsCheck + "\n";
        supportString += "* Database type: {{ page_data.db_type }}\n";
        supportString += "* Database version: {{ page_data.db_version }}\n";
        supportString += "* Clients used: \n";
        supportString += "* Reverse proxy and version: \n";
        supportString += "* Other relevant information: \n";

        let jsonResponse = await fetch('{{urlpath}}/admin/diagnostics/config');
        const configJson = await jsonResponse.json();
        supportString += "\n### Config (Generated via diagnostics page)\n<details><summary>Show Running Config</summary>\n"
        supportString += "\n**Environment settings which are overridden:** {{page_data.overrides}}\n"
        supportString += "\n\n```json\n" + JSON.stringify(configJson, undefined, 2) + "\n```\n</details>\n";

        document.getElementById('support-string').innerText = supportString;
        document.getElementById('support-string').classList.remove('d-none');
        document.getElementById('copy-support').classList.remove('d-none');
    }

    function copyToClipboard() {
        const supportStr = document.getElementById('support-string').innerText;
        const tmpCopyEl = document.createElement('textarea');

        tmpCopyEl.setAttribute('id', 'copy-support-string');
        tmpCopyEl.setAttribute('readonly', '');
        tmpCopyEl.value = supportStr;
        tmpCopyEl.style.position = 'absolute';
        tmpCopyEl.style.left = '-9999px';
        document.body.appendChild(tmpCopyEl);
        tmpCopyEl.select();
        document.execCommand('copy');
        tmpCopyEl.remove();

        new BSN.Toast('#toastClipboardCopy').show();
    }
</script>
